<template>
    <Popup class="tech-location-fail" v-model="visiable" :close-on-click-overlay="false">
        <div class="location-fail-img">
            <img src="@assets/icon/location-fail.png" alt="定位失败">
        </div>
        <div class="location-fail-tip">
            <div class="tip-title">定位失败</div>
            <div class="tip-content">请检查网络环境或手机权限设置</div>
        </div>
        <div class="location-fail-btns">
            <Button @click="close">手动定位</Button>
            <Button class="tech-btn" type="danger" @click="relocation">重新定位</Button>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import { getWXConfig } from '@store/action';
import { wxConfig } from '@common/oauth/wechat';
import { platformTruth } from '@common/environment';
export default {
    name: 'LocationFail',
    components: {
        Popup,
        Button,
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        close() {
            this.visiable = false;
        },
        async relocation() {
            const { isWechat, isAlipay } = platformTruth();
            if (isWechat) {
                // 重新获取并注册当前地址，然后调用回调函数
                const config = await getWXConfig();
                wxConfig(config, ['getLocation'], () => {
                    this.$emit('reAction');
                });
            }
            if (isAlipay) {
                this.$emit('reAction');
            }
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-location-fail {
    width: 90%;
    border-radius: @border-radius;
    .location-fail-img {
        width: 100%;
        height: 180px;
        .linear-right(#F6EEEB, #F5D5D3);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .location-fail-tip {
        .m-t(@gap-lg * 2);
        .m-b(@gap);
        .flex-column-center();
        .tip-title {
            color: @text-color;
            .font-size-md();
            font-weight: @font-weight-bold;
            .m-v(@gap-sm);
        }
        .tip-content {
            color: @gray-darker;
            .font-size();
        }
    }
    .location-fail-btns {
        .p(@gap-md);
        .flex-row-center();
        .van-button {
            flex: 1;
        }
        .tech-btn {
            .m-l(@gap-md);
        }
    }
}
</style>
